<template>
  <div class="container">
    <!-- <div class="top"></div> -->
    <div class="content">
      <div style="float: right; margin-bottom: 5px">
        <el-button
          type="primary"
          icon="el-icon-circle-plus"
          size="mini"
          @click="addVm()"
          >增加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        stripe
        highlight-current-row
        row-key="id"
        element-loading-text="数据加载中"
        element-loading-spinner="el-icon-loading"
        :header-cell-style="{ background: '#EBECF0' }"
        ref="table"
      >
        <el-table-column
          prop="name"
          label="名称"
          width="100px"
        ></el-table-column>
        <el-table-column
          prop="uuid"
          label="uuid"
          width="300px"
        ></el-table-column>
        <el-table-column
          prop="mac"
          label="MAC地址"
          width="150px"
        ></el-table-column>
        <el-table-column
          prop="memory"
          label="最大内存(MB)"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="currentMemory"
          label="当前内存(MB)"
          width="120px"
        ></el-table-column>
        <el-table-column
          prop="vcpu"
          label="CPU个数"
          width="100px"
        ></el-table-column>

        <el-table-column
          prop="network_type"
          label="网络类型"
          width="100px"
        ></el-table-column>
        <el-table-column prop="disk1Source" label="系统镜像"></el-table-column>
        <el-table-column prop label="操作" width="300px">
          <template slot-scope="scope">
            <el-button-group>
              <el-tooltip
                class="item"
                effect="dark"
                content="启动虚拟机"
                placement="bottom"
              >
                <el-button
                  icon="el-icon-video-play"
                  size="mini"
                  @click="onStart(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="关闭虚拟机"
                placement="bottom"
              >
                <el-button
                  icon="el-icon-video-pause"
                  size="mini"
                  @click="onStop(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="修改虚拟机配置"
                placement="bottom"
              >
                <el-button
                  size="mini"
                  icon="el-icon-edit"
                  @click="onEdit(scope.row)"
                ></el-button>
              </el-tooltip>
              <!-- <el-tooltip
                class="item"
                effect="dark"
                content="删除虚拟机"
                placement="bottom"
              >
                <el-button
                  size="mini"
                  icon="el-icon-delete"
                  type="danger"
                  @click="onDelete(scope.row)"
                ></el-button>
              </el-tooltip> -->
              <el-dropdown>
                <el-button size="mini" icon="el-icon-more-outline"></el-button>
                <el-dropdown-menu slot="dropdown">
                  <!-- <el-dropdown-item command="start">启动</el-dropdown-item>
                  <el-dropdown-item command="stop">关闭</el-dropdown-item> -->
                  <el-dropdown-item
                    command="suspend"
                    @click.native="onSuspend(scope.row)"
                    >挂起</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="resume"
                    @click.native="onResume(scope.row)"
                    >恢复</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="reboot"
                    @click.native="onReboot(scope.row)"
                    >重启</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="snap"
                    @click.native="onSnap(scope.row)"
                    >创建快照</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="revertsnap"
                    @click.native="onRecoverSnap(scope.row)"
                    >恢复快照</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="delete"
                    @click.native="onDelete(scope.row)"
                    >删除虚拟机</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.size"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes,  prev, pager, next"
          :total="pagination.totalNum"
        ></el-pagination>
      </div>
    </div>
    <MachineEditDialog
      @close="onCloseDialog"
      ref="MachineEditDialog"
    ></MachineEditDialog>
  </div>
</template>

<script>
// import axios from "axios";
import MachineEditDialog from "./MachineEditDialog";
export default {
  name: "assetManager",
  components: { MachineEditDialog },
  data() {
    return {
      tableData: [
        // {
        //   currentMemory: 512000,
        //   disk1Source: "/home/str3am/iso/ubuntu-16.04.6-desktop-amd64.iso",
        //   mac: "00:16:3e:64:01:00",
        //   memory: 512000,
        //   name: "test",
        //   network_type: "default",
        //   uuid: "test",
        //   vcpu: 1,
        // },
        // {
        //   currentMemory: 512000,
        //   disk1Source: "/home/str3am/iso/ubuntu-16.04.6-desktop-amd64.iso",
        //   mac: "00:16:3e:64:01:00",
        //   memory: 512000,
        //   name: "test",
        //   network_type: "default",
        //   uuid: "test",
        //   vcpu: 1,
        // },
      ],
      pagination: {
        currentPage: 1,
        size: 10,
        totalNum: 0,
      },
    };
  },
  mounted() {
    this.getVmList();
  },
  watch: {},
  methods: {
    getVmList() {
      let obj = {
        pageSize: this.pagination.size,
        currentPage: this.pagination.currentPage,
      };
      this.$fetch(`/machine`, obj).then((res) => {
        if (res.error == 0) {
          this.tableData = res.data.list;
          this.pagination.totalNum = res.data.page.total;
        }
      });
    },
    addVm() {
      this.$refs.MachineEditDialog.open();
    },
    onStart(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/start`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机启动成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onStop(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/destory`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机停止成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onSuspend(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/suspend`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机挂起成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },

    onResume(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/resume`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机挂起成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },

    onReboot(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/reboot`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机重启成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onSnap(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/snap`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机创建快照成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onRecoverSnap(row) {
      let obj = {
        name: row.name,
      };
      this.$post(`/machine/revertsnap`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机恢复快照成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    onEdit(row) {
      this.$refs.MachineEditDialog.open(row);
    },
    onDelete(row) {
      let obj = {
        name: row.name,
      };
      this.$remove(`/machine`, obj).then((res) => {
        if (res.error == 0) {
          this.$message({
            message: "虚拟机删除成功",
            type: "success",
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
        this.getVmList();
      });
    },
    onMoreOp(row, cmd) {
      // console.log(row);
      console.log(cmd);
      if (cmd == "start") {
        this.onStart();
      } else if (cmd == "stop") {
        this.onStop();
      } else if (cmd == "suspend") {
        this.onSuspend();
      } else if (cmd == "resume") {
        this.onResume();
      } else if (cmd == "reboot") {
        this.onReboot();
      } else if (cmd == "snap") {
        this.onAddSnap();
      } else if (cmd == "revertsnap") {
        this.onRecoverSnap();
      } else if (cmd == "delete") {
        this.onDelete();
      }
    },
    onCloseDialog() {
      this.getVmList();
    },
    handleSizeChange(val) {
      this.pagination.size = val;
      this.getVmList();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getVmList();
    },
  },
};
</script>

<style scoped lang='scss'>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: #e9eef3;
  .top {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #fff;
    // box-shadow: 1px 1px 2px #ccc;
    font-size: 14px;
    // color: #606266;
    // border-radius: 5px;
    .el-form-item {
      margin: 5px;
    }

    .el-button {
      margin-left: 10px;
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    background-color: #fff;
    box-shadow: 2px 2px 2px #ccc;
    border-radius: 5px;
    .block {
      width: 100%;
      margin-top: 20px;
      overflow: hidden;
      .el-pagination {
        float: right;
      }
    }
  }
}
</style>
